<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>流程设计器</title>
	<link rel="stylesheet" href="css/diagram-js.css" />
	<link rel="stylesheet" href="vendor/bpmn-font/css/bpmn-embedded.css" />
	<link rel="stylesheet" href="css/app.css" />

	<link rel="stylesheet" href="/businessProcessManager/js/ele/index.css">
	<link rel="stylesheet" href="/businessProcessManager/css/style.css">
	<!-- 先引入 Vue -->
	<script src="/businessProcessManager/js/ele/vue.js"></script>
	<script src="/businessProcessManager/js/ele/vue-resource.js"></script>
	<script src="/businessProcessManager/js/ele/vue-router.js"></script>
	<!-- 引入组件库 -->
	<script src="/businessProcessManager/js/ele/index.js"></script>
	<script src="/businessProcessManager/js/jquery.min.js"></script>
	<script src="/businessProcessManager/js/jquery.mCustomScrollbar.concat.min.js"></script>
	<script src="/businessProcessManager/js/date.js"></script>
    <style>
        .v-modal{
            background: content-box;
        }
    </style>
</head>
<body>
	<div class="content" id="js-drop-zone">

		<!--<div class="message intro">
			<div class="note">
        		<a id="js-create-diagram" href>create a new diagram</a> to get started.
      		</div>
		</div>-->

		<div class="message error">
			<div class="note">
				<p>Ooops, we could not display the BPMN 2.0 diagram.</p>

				<div class="details">
					<span>cause of the problem</span>
					<pre></pre>
				</div>
			</div>
		</div>

		<div class="canvas" id="js-canvas">
		</div>

		<div id="js-properties-panel">
			<div class="bpp-properties-header">
				<div id="tree">
                    <div style="margin-bottom: 5px"><span style="font-size: 120%;font-weight: bold">流程所属组织机构</span></div>
					<el-input placeholder="请输入内容" v-model="organization" class="input-with-select" disabled>
						<el-button slot="append" icon="el-icon-search" @click="dutyDialog=true;">选择</el-button>
					</el-input>
                    <div style="margin-bottom: 5px"><span style="font-size: 120%;font-weight: bold">流程类型</span></div>
                    <!--流程类型-->
                    <el-select v-model="processType" placeholder="请选择" @change="setProcessType">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <!--组织机构数-->
                    <el-dialog :fullscreen="false" title="选择组织机构" :visible.sync="dutyDialog">
						<el-tree
								:data="treeDatas"
								node-key="id"
								ref="tree"
								highlight-current lazy
								:expand-on-click-node="false"
								:load="treeLoadNode"
								@node-click="selected"
								:props="treeProps">
						</el-tree>
					</el-dialog>
				</div>
			</div>
		</div>
	</div>

	<ul class="buttons">
		<li>下载</li>
		<li><a id="js-download-diagram" href
			title="download BPMN diagram"> BPMN图表 </a></li>
		<li><a id="js-download-svg" href title="download as SVG image">
				SVG图片 </a></li>
		<li><button id="btn_save">保存</button>
		<li><button id="btn_deploy">部署</button>
	</ul>

	<script src="extend.js" charset="utf-8"></script>
	<script src="index.js" charset="utf-8"></script>
	<!--引入url配置文件-->
	<script src="/businessProcessManager/js/config.js"></script>
	<script>
		var organization;
		var processType;
        //树形
        var tree = new Vue({
            el: '#tree',
            data: {
                dutyDialog: false,
                treeDatas:[],
                treeProps: {
                    label: 'organizationName',
                    children: 'zones'
                },
				organization: "",
                options: [{
                    value: '1',
                    label: '发文流程'
                }, {
                    value: '2',
                    label: '收文流程'
                }],
                processType: ''
            },
            created:function(){
                this.queryOrgAndType();
            },
            methods: {
                treeLoadNode: function (node, resolve) {  //树加载
                    const that = this;
                    that.$http.get("http://192.168.3.71:22003/organization/getTree",
                        {'pid': node.data.organizationCode}).then(function (data) {
                        if (showError(data, that)) {
                            resolve(data.data.data);
                        }
                    });
                },
                dutyDialogOpen() {
                    this.dutyDialog = true;
                },
                selected:function (val) {
					this.organization=val.organizationName;
                    organization=val.organizationCode;
                    this.dutyDialog = false;
                },
                setProcessType:function (val) {
                    console.info(val);
                    processType=val;
                },
                queryOrgAndType:function () {
                    var processDefinitionId=parent.processDefinitionId;
                    var modelId=parent.modelId;
                    if(processDefinitionId==null||processDefinitionId==""){
                        processDefinitionId=getQueryString("processDefinitionId");
                    }
                    if(modelId==null||modelId==""){
                        modelId=getQueryString("modelId");
                    }
                    if(processDefinitionId!=null&&processDefinitionId!=""){
                        this.$http.get(url+portP+"repository/process-definitions/"+processDefinitionId).then(function(data){
                            var category=data.data.category;
                            tree.organization=category.split("-")[0];
                            tree.processType=category.split("-")[1];
                            organization=category.split("-")[0];
                        },function(response){
                            console.info(response);
                        })
					}else if(modelId!=null&&modelId!=""){
                        this.$http.get(url+portP+"repository/models/"+modelId).then(function(data){
                            var category=data.data.category;
                            tree.organization=category.split("-")[0];
                            tree.processType=category.split("-")[1];
                            organization=category.split("-")[0];
                        },function(response){
                            console.info(response);
                        })
					}
                }
            }
        });
        function showError(data, that) {
            if (data.data.code != '200') {
                that.$message({
                    message: data.data.msg,
                    type: 'warning'
                });
                return null;
            } else {
                return data;
            }
        }
	</script>
</body>
</html>
